<template>
  <el-dialog title="任务单号" v-model="dialogVisible" width="80%" style="margin-top: 40px;" >
    <el-form ref="formRef" class="mb" :model="queryParams" :inline="true" label-width="110px">
      <el-form-item label="任务单号" prop="taskNumber">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.taskNumber"
          placeholder="请输入任务单号"
        />
      </el-form-item>
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.productNumber"
          placeholder="请输入产品编号"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    
    <el-table
      border
      v-loading="formLoading"
      ref="multipleTableRef"
      :data="list"
      @selection-change="handleSelectionChange"
      :height="contentHeight * 0.74"
    >
      <el-table-column type="selection" />
      <el-table-column label="任务单号" align="left" prop="taskNumber" />
      <el-table-column label="客户代码" align="left" prop="customerCode" />
      <el-table-column label="产品编号" align="left" prop="productNumber" />
      <el-table-column label="产品名称" align="left" prop="productName" />
      <el-table-column label="产品规格" align="left" prop="productStandard" />
      <el-table-column label="部件类型" align="left" prop="partType" />
      <el-table-column label="出图类型" align="left" prop="dictDrawingType" >
        <template #default="scope">
          <dict-tag type="dict_drawing_type" :value="scope.row.dictDrawingType" />
        </template>
      </el-table-column>
      <el-table-column label="设计员" align="left" prop="designerPersonName" />
    </el-table>
    <!-- 分页 -->
    <div class="">
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import * as componentApi from '@/api/componentApi'
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const queryParams = reactive({
  pageNo: 1,
  pageSize: 50,
  taskNumber: undefined,
  productNumber: undefined,
  productName: undefined
})
const total = ref(0) // 列表的总页数
const list = ref([])
const formRef = ref() // 表单 Ref

defineProps({
  contentHeight: {
    type: Number,
    default: 0
  }
})

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  resetForm()
  getList()
}

const emit = defineEmits(['getVerifyParams'])

// 确认
const submitForm = () => {
  if (multipleSelection.value.length > 1) {
    message.notifyError('只能选择一条数据')
    return
  }
  dialogVisible.value = false
  emit('getVerifyParams', multipleSelection.value)
  multipleTableRef.value!.clearSelection()
}

// 获取列表
const getList = async () => {
  formLoading.value = true
  const res = await componentApi.getDrawingTaskList(queryParams)
  list.value = res.list
  total.value = res.total
  formLoading.value = false
}

// 搜索
const handleQuery = async () => {
  queryParams.pageNo = 1
  getList()
}

// 重置按钮
const resetQuery = () => {
  formRef.value.resetFields()
  handleQuery()
}

// 多选赋值
const multipleSelection = ref([])
const multipleTableRef = ref()
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

defineExpose({ open, multipleSelection }) // 提供 open 方法，用于打开弹窗

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.mb {
  margin-bottom: 20px;
}

.pagination::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
</style>
